<template>
  <div class="app-container">
    <!-- 条件框 -->
    <el-row :gutter="10">
        <el-col :span="4">
            <el-input @clear="search"  placeholder="请输入行政区编码" v-model="areaPageDto.codeSearch" clearable> </el-input>
        </el-col>
        <el-col :span="4">
            <el-input @clear="search"  placeholder="请输入行政区名称" v-model="areaPageDto.nameSearch" clearable> </el-input>
        </el-col>
        <el-col :span="2">
            <el-button @click="areaPageDto.now=1;search()" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
         <el-col :span="2">
            <el-button @click="clearSearch" type="danger" icon="el-icon-delete">清空</el-button>
        </el-col>
    </el-row>
    
    <el-table :data="areaList" style="width: 100%" max-height="500" stripe border="true">
      <el-table-column prop="code" label="行政区编码" align="center"/>
      <el-table-column prop="name" label="名称" align="center"/>
      <el-table-column label="等级" align="center"> 
        <template slot-scope="scope">
          <span >
            {{ scope.row.level |levelFormat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column  label="类型" align="center"> 
        <template slot-scope="scope">
          <span >
            {{ scope.row.type |typeFormat }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="abname" label="简称" align="center"/>
      <el-table-column prop="pid" label="父编码" align="center"/>
      <el-table-column prop="pname" label="父名称" align="center"/>
      <el-table-column prop="note" label="备注" align="center"/>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="areaPageDto.now"
      layout="total,prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
//导入dept api
import { page} from "@/api/area";
//导入pcd组件
// import PCD  from '../components/pcd.vue';
export default {
  components: {
    // // PCD:PCD
    // PCD
  },
  data() {
    return {
      areaList: [],
      areaPageDto: {
        now: 1,
        size: 10,
        codeSearch:"",
        nameSearch:""
      },
      pages: 0,
      total: 0,
    };
  },
  methods: {
    handleCurrentChange(now) {
      this.areaPageDto.now = now;
      this.search();
    },
    search() {
      page(this.areaPageDto).then((res) => {
        let arealist = res.data
        this.areaList = arealist.list;
        this.pages = arealist.pages;
        this.total = arealist.total;
      });
    },
    clearSearch(){
      this.areaPageDto.codeSearch = ""
      this.areaPageDto.nameSearch = ""
      this.search()
    }
  },
  created() {
    this.search();
  },
  filters:{
    levelFormat(source){
      let fLevel = "省"
      if(source == 2)
        fLevel = "市"
      else if(source == 3)
        fLevel = "区/县"
      return fLevel
    },
    typeFormat(source){
      let fType = 1
      switch(source){
        case 1:fType = "省" ;break
        case 2:fType = "自治区" ;break
        case 3:fType = "直辖市" ;break
        case 4:fType = "特别行政区" ;break
        case 5:fType = "地级市" ;break
        case 6:fType = "地区" ;break
        case 7:fType = "自治州" ;break
        case 8:fType = "盟" ;break
        case 9:fType = "市辖区" ;break
        case 10:fType = "县" ;break
        case 11:fType = "县级市" ;break
        case 12:fType = "自治县" ;break
        case 13:fType = "旗" ;break
        case 14:fType = "自治旗" ;break
        case 15:fType = "特区" ;break
        case 16:fType = "林区" ;break
      }
      return fType
    }
  }
};
</script>

<style lang="">
</style>